<template>
	<el-tabs v-model="activeName" @tab-click="handleClick">
		<el-tab-pane label="订单列表" name="first">
			<div style="margin-right:2%;">
				<span>分类：</span>
				<el-select v-model="indentType" style="width:150px;margin-left: 10px;" @change="animeDat1(indentType)">
					<el-option v-for="item in indentTypeList" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>&nbsp;&nbsp;&nbsp;&nbsp;
				<span>状态：</span>
				<el-select v-model="status" style="width:150px;margin-left: 10px;" @change="animeDat(status)">
					<el-option v-for="item in statesnum" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>&nbsp;&nbsp;&nbsp;&nbsp;
				<div style="position: relative;display: inline-block;margin: 5px;">
					<span>订单编号：</span>
					<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入订单编号"
						v-model="ordersNo"></el-input>&nbsp;&nbsp;
				</div>
				<div style="position: relative;display: inline-block;">
					<span>电话：</span>
					<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入电话"
						v-model="phone"></el-input>&nbsp;&nbsp;
				</div>
				<div style="position: relative;display: inline-block;">
					<span>一级用户：</span>
					<el-input style="width: 172px;" @keydown.enter.native="select" placeholder="请输入一级用户佣金"
						v-model="parentName"></el-input>&nbsp;&nbsp;
				</div>
				<div style="position: relative;display: inline-block;">
					<span>二级用户：</span>
					<el-input style="width: 172px;" @keydown.enter.native="select" placeholder="请输入二级用户佣金"
						v-model="parentParentName"></el-input>&nbsp;&nbsp;
				</div>
				<div style="position: relative;display: inline-block;margin: 5px;">
            <span>按时间类型：</span>
					<el-select v-model="flag" style="width:150px;margin-left: 10px;" @change="orderfenxi">
						<el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>&nbsp;&nbsp;&nbsp;
					<el-date-picker style="width: 200px;margin-left: 10px;" v-model="info.stockDate" align="right"
						type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间"
						@change="animeOrder">
					</el-date-picker>
				</div>
				<div style="margin:5px;display: inline-block;">
					<span>开始时间：</span>
					<el-date-picker style="width: 160px;margin-left: 10px;" v-model="startTime" align="right"
						type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间">
					</el-date-picker>&nbsp;&nbsp;&nbsp;
				</div>
				<div style="margin:5px;display: inline-block;">
					<span>截止时间：</span>
					<el-date-picker style="width: 160px;margin-left: 10px;" v-model="endTime" align="right" type="datetime"
						format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择截止时间">
					</el-date-picker>
				</div>
				<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="select">查询
				</el-button>
				<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="cleans">重置
				</el-button>
				<!-- <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="exportBtn">导出
				</el-button> -->
			</div>
			<div style="color: orange;"> * 导出订单提示：导出订单前请进行时间或者状态等筛选，否则导出订单量过多易出现卡顿或系统崩溃</div>
			<el-table v-loading="tableDataLoading" :data="tableData.list">
				<el-table-column prop="indentId" label="编号" width="80" fixed="left">
				</el-table-column>

				<el-table-column prop="shipUserName" label="师傅昵称" width="120">
					<!-- <template slot-scope="scope">
						<div style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row.riderUserId)">
							{{scope.row.?scope.row.shipUserName:'未绑定'}}
						</div>
					</template> -->
				</el-table-column>
				<el-table-column prop="phone" label="师傅电话" width="150">
					<!-- <template slot-scope="scope">
						<div>{{scope.row.phone?scope.row.phone:'未绑定'}}</div>
					</template> -->
				</el-table-column>
				<el-table-column prop="shipUserName" label="下单人姓名" width="120">
					<template slot-scope="scope">
						<div style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row.userId)">
							{{scope.row.shipUserName?scope.row.shipUserName:'未绑定'}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="shipUserPhone" label="下单人电话" width="150">
					<template slot-scope="scope">
						<div>{{scope.row.shipUserPhone?scope.row.shipUserPhone:'未绑定'}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="indentNumber" label="订单号">
				</el-table-column>
				<el-table-column prop="indentType" label="订单类型" width="100">
					<template slot-scope="scope">
						<div v-if="scope.row.indentType=='1'">即时代驾</div>
						<div v-if="scope.row.indentType=='2'">朋友代叫</div>
						<div v-if="scope.row.indentType=='3'">预约代驾</div>
					</template>
				</el-table-column>
				<el-table-column prop="serviceDetails" label="出发地址" width="200">
					<template slot-scope="scope">
						<div>{{scope.row.shipAddress}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="deilveryAddressDetail" label="出发地址经纬度" width="300">
					<template slot-scope="scope">
						<div>
							<div>经度：{{scope.row.shipAddressLongitude}}</div>
							<div>纬度：{{scope.row.shipAddressLatitude}}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="deliveryAddress" label="目的地址"></el-table-column>
				<el-table-column prop="deilveryAddressDetail" label="目的地址经纬度" width="300">
					<template slot-scope="scope">
						<div>
							<div>经度：{{scope.row.deliveryAddressLongitude}}</div>
							<div>纬度：{{scope.row.deliveryAddressLatitude}}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="distance" label="总路程"></el-table-column>
				<el-table-column prop="remarks" label="备注" width="200">
				</el-table-column>



				<el-table-column prop="modeOfPayment" label="支付方式">
					<template slot-scope="scope">
						<div v-if="scope.row.modeOfPayment==1">微信</div>
						<div v-if="scope.row.modeOfPayment==2">支付宝</div>
						<div v-if="scope.row.modeOfPayment==3">余额</div>
					</template>
				</el-table-column>
				<el-table-column prop="prepayMoney" label="预估商品费用">
				</el-table-column>
				<el-table-column prop="redPacketAmount" label="红包">
				</el-table-column>
				<el-table-column prop="tip" label="小费">
				</el-table-column>
				<el-table-column prop="errandMoney" label="跑腿费">
				</el-table-column>
				<el-table-column prop="userScaleMoney" label="一级用户佣金" width="120">
					<template slot-scope="scope">
						<span style="color: #f56c6c;" @click="updates(scope.row.userScaleUserId)">{{scope.row.userScaleMoney ? scope.row.userScaleMoney : '—'}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="userTwoMoney" label="二级用户佣金" width="120">
					<template slot-scope="scope">
						<span style="color: #f56c6c;" @click="updates(scope.row.userTwoUserId)">{{scope.row.userTwoMoney ? scope.row.userTwoMoney : '—'}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="riderRewardMoney" label="师傅奖励金额">
				</el-table-column>
				<el-table-column prop="userFine" label="用户取消订单罚金">
				</el-table-column>
				<el-table-column prop="riderFine" label="师傅取消订单罚金">
				</el-table-column>
				<el-table-column prop="platformMoney" label="平台收入">
				</el-table-column>
				<el-table-column prop="riderMoney" label="师傅收入">
				</el-table-column>
				<el-table-column prop="indentBasicsMoney" label="订单基础价格">
				</el-table-column>


				<el-table-column prop="indentMoney" label="支付价格">
				</el-table-column>
				<el-table-column prop="itemCode" label="收货码">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160">
				</el-table-column>
				<el-table-column prop="indentState" label="状态" fixed="right" width="160">
					<template slot-scope="scope">
						<div v-if="scope.row.indentState=='0'">待接单</div>
						<div v-if="scope.row.indentState=='1'">进行中</div>
						<div v-if="scope.row.indentState=='2'">待支付</div>
						<div v-if="scope.row.indentState=='3'">已完成</div>
						<div v-if="scope.row.indentState=='4'">已取消</div>
					</template>
				</el-table-column>
				<el-table-column prop="isRider" label="是否是转单" fixed="right" width="80">
					<template slot-scope="scope">
						<div v-if="scope.row.isRider==1">是</div>
						<div v-else>否</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="80" align="center" fixed="right">
					<template slot-scope="scope">
						<!-- <el-button size="mini" type="danger" :disabled="!isAuth('orderCenter:delete')"
							@click="deletes(scope.row)">删除</el-button> -->
							<el-button size="mini" type="primary" v-if="scope.row.indentState == '3'||scope.row.indentState == '4'"
								:disabled="!isAuth('orderCenter:zhuandan')" @click="zhuandan(scope.row)"
								style="margin: 3px;">转单</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: center;margin-top: 10px;float:right">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
					layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalCount">
				</el-pagination>
			</div>
		</el-tab-pane>
		<!-- 师傅列表 -->
		<el-dialog title="师傅列表" :visible.sync="dialogFormVisible" center>
			<div style="margin:2% 0;display: inline-block;">
				<span>手机号:</span>
				<el-input style="width: 150px;" @keydown.enter.native="selectU" clearable placeholder="请输入手机号"
					v-model="phoneU"></el-input>
			</div>&emsp;&emsp;
			<div style="margin:2% 0;display: inline-block;">
				<span>昵称:</span>
				<el-input style="width: 150px;" @keydown.enter.native="selectU" clearable placeholder="请输入昵称"
					v-model="campus"></el-input>
			</div>&emsp;&emsp;
			<div style="display: inline-block;">
				<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="selectU">查询
				</el-button>
				<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="cleansU">重置
				</el-button>
			</div>
			<el-table v-loading="tableDataLoadingU" :data="userData.list">
				<el-table-column prop="userId" label="编号" width="80">
				</el-table-column>
				<el-table-column prop="nickName" label="用户昵称" width="120">
					<template slot-scope="scope">
						　<span style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row)"
							v-text="scope.row.nickName"></span>
					</template>
				</el-table-column>
				<el-table-column prop="avatar" label="用户头像" width="100">
					<template slot-scope="scope">
						　　<img v-if="scope.row.avatar && scope.row.avatar!=''" :src="scope.row.avatar" width="40"
							height="40" />
						<span v-else>暂无图片</span>
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="手机号">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180">
				</el-table-column>
				<el-table-column label="操作" prop="id" width="100" fixed='right' align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary"
							@click="userBtns(scope.row)">确认
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: center;margin-top: 10px;">
				<el-pagination @size-change="handleSizeChangeU" @current-change="handleCurrentChangeU"
					:page-sizes="[10, 20, 30, 40]" :page-size="limit1" :current-page="page1"
					layout="total,sizes, prev, pager, next,jumper" :total="userData.totalCount">
				</el-pagination>
			</div>
		</el-dialog>
	</el-tabs>
</template>
<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				classify: 1,
				ordersNo: '',
				imageUrl: '',
				url: '',
				status: '',
				parentName:'',
				parentParentName:'',
				activeName: 'first',
				tableDataLoading: true,
				tableData: [],
				checkBoxData: [], //多选框选择的值
				statesnum: [{
						label: '全部',
						value: ''
					},
					{
						label: '师傅已接单',
						value: 3
					},
					{
						label: '师傅已取货/购买',
						value: 4
					},
					// {
					// 	label: '已送达',
					// 	value: 5
					// },
					{
						label: '已完成',
						value: 6
					},
				],
				indentType: '',
				indentTypeList: [{
						label: '全部',
						value: ''
					},
					{
						label: '帮我送',
						value: 1
					},
					{
						label: '帮我取',
						value: 2
					},
					{
						label: '同城帮买',
						value: 3
					},
					{
						label: '同城服务',
						value: 4
					},
				],
				flag: '',
				info: {
					stockDate: this.getNowTime(), //日期
				},
				flags: [{
					value: 'day',
					label: '按天查询'
				}, {
					value: 'month',
					label: '按月查询'
				}, {
					value: 'year',
					label: '按年查询'
				}],
				phone:'',
				userData:{},
				phoneU:'',
				campus:'',
				ordersId:'',
				limit1: 10,
				page1: 1,
				dialogFormVisible: false,

				info2: {
					stockDate2: this.getNowTime2(), //日期
				},
				startTime: '',
				endTime: '',
				tableDataLoadingU:false,
			}
		},
		methods: {
			// 多选
			changeFun(val) {
				this.checkBoxData = val
			},
			//处理默认选中当前日期
			getNowTime () {
				var now = new Date()
				var year = now.getFullYear() //得到年份
				var month = now.getMonth() //得到月份
				var date = now.getDate() //得到日期
				var hh = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
				var mm = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
				var ss = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')
				var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`
				return defaultDate
				this.$set(this.info, 'stockDate', defaultDate)
			},
			//处理默认选中当前日期
			getNowTime2() {
				var now = new Date()
				var year = now.getFullYear() //得到年份
				var month = now.getMonth() - now.getMonth() //得到月份
				var date = now.getDate() - now.getDate() + 1 //得到日期
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')
				var defaultDate = `${year}-${month}-${date}`
				return defaultDate
				this.$set(this.info, 'stockDate', defaultDate)
			},
			// tabs切换
			handleClick(tab, event) {
				if (tab._props.label == '订单列表') {
					this.page = 1
					this.limit = 10
					this.classify = 1
					this.dataSelect()
				}
			},
			handleSizeChange(val) {
				this.limit = val
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val
				this.dataSelect()
			},
			handleSizeChangeU(val) {
				this.limit1 = val;
				this.dataSelectUser()()
			},
			handleCurrentChangeU(val) {
				this.page1 = val;
				this.dataSelectUser()
			},
			// 查询资源列表
			select() {
				this.page = 1
				this.limit = 10
				this.dataSelect()
			},
			// 重置资源列表
			cleans() {
				this.ordersNo = ''
				this.status = ''
				this.phone = ''
				this.indentType = ''
				this.page = 1
				this.flag = ''
				this.startTime = ''
				this.endTime = ''
				this.parentName = ''
				this.parentParentName = ''
				this.info.stockDate = this.getNowTime()
				this.dataSelect()
			},
			// select选择事件
			animeDat(state) {
				this.page = 1
				this.status = state
				console.log(state)
				this.dataSelect()
			},
			animeDat1(state) {
				this.page = 1
				this.indentType = state
				this.dataSelect()
			},
			// 删除banner图
			deletes(row) {
				let delid = row.ordersId
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl(`order/deleteOrders?ids=${delid}`),
						method: 'get',
						data: this.$http.adornData({})
					}).then(({
						data
					}) => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					})
				}).catch(() => {})
			},
			// 获取数据列表
			dataSelect() {
				this.tableDataLoading = true
				var endTime = this.endTime
				if (this.endTime != '') {
					endTime = this.endTime + " 23:59:59"
				}
				this.$http({
					url: this.$http.adornUrl('adminerrand/IndentCenter'),
					method: 'post',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'indentType': this.indentType,
						'indentNumber': this.ordersNo,
						'indentState': this.status,
						'date': this.info.stockDate,
						'dateType': this.flag,
						'phone':this.phone,
						'startTime': this.startTime,
						'endTime': endTime,
						'parentName': this.parentName,
						'parentParentName': this.parentParentName
					})
				}).then(({
					data
				}) => {
					console.log(data)
					if (data && data.code === 0) {
						this.tableDataLoading = false
						let returnData = data.data
						this.tableData = returnData
					}
				})
			},
			// 详情跳转
			updates(userId) {
				if(userId){
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: userId
					}
				})
				}

			},
			// 订单分析选择日期
			animeOrder() {
				console.log('info',this.info)
				this.dataSelect()
				// this.colonel()
			},
			// 订单分析年月日
			orderfenxi(value) {
				this.page = 1
				let vanumber = value
				// if (vanumber === 1) {
					this.flag = value
					this.dataSelect()
					// this.colonel()
				// }
				// if (vanumber === 2) {
				// 	this.flag = 2
				// 	this.taskData()
				// 	this.colonel()
				// }
				// if (vanumber === 3) {
				// 	this.flag = 3
				// 	this.taskData()
				// 	this.colonel()
				// }
			},
			// 转单弹框
			zhuandan(row){
				this.ordersId = row.indentId
				this.dataSelectUser()
				this.dialogFormVisible = true
			},
			// 确认选择
			userBtns(row){
				this.$http({
					url: this.$http.adornUrl('adminerrand/transferOfOrder'),
					method: 'post',
					params: this.$http.adornParams({
						'riderUserId': row.userId,
						'indentId': this.ordersId,
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
								this.dialogFormVisible = false
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {}
						})
					}


				})
			},
			// 获取数据列表
			dataSelectUser() {
				this.tableDataLoadingU = true
				this.$http({
					url: this.$http.adornUrl('adminerrand/findAllUser'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page1,
						'limit': this.limit1,
						// 'member': this.member,
						'phone': this.phoneU,
						'nickName': this.campus,
						'userType': 2,
						'invitationCode':'',
						'platform':''
					})
				}).then(({
					data
				}) => {
					this.tableDataLoadingU = false
					let returnData = data.data
					this.userData = returnData
				})
			},
			// 查询
			selectU() {
				this.page = 1
				this.dataSelectUser()
			},
			// 重置
			cleansU() {
				this.page1 = 1
				this.campus = ''
				this.phoneU = ''
				this.dataSelectUser()
			},
			// 导出
			exportBtn() {
				var endTime = this.endTime
				if (this.endTime != '') {
					endTime = this.endTime + " 23:59:59"
				}
				this.$http({
					url: this.$http.adornUrl('adminerrand/exportExcelIndent'),
					method: 'get',
					responseType: 'blob',
					params: this.$http.adornParams({
						'indentType': this.indentType,
						'indentNumber': this.ordersNo,
						'indentState': this.status,
						'date': this.info.stockDate,
						'dateType': this.flag,
						'phone':this.phone,
						'startTime': this.startTime,
						'endTime': endTime,
					})
				}).then(({
					data
				}) => {
					let blob = new Blob([data], {
						type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
					})
					if (window.navigator.msSaveOrOpenBlob) {
						navigator.msSaveBlob(blob)
					} else {
						let url = window.URL.createObjectURL(blob)
						let elink = document.createElement('a')
						elink.download = '订单列表.xlsx'
						elink.style.display = 'none'
						elink.href = url
						document.body.appendChild(elink)
						elink.click()
						document.body.removeChild(elink)
					}
				})
			},
		},
		mounted() {
			this.dataSelect()
		}
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}
</style>
